<template><!--讲师详情-->
    <div class="warp-2" style="height: 100%;">
            <navbar :title="$t('instructor_detail')"></navbar>
            <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                <van-list
                v-model="isLoading"
                :finished="finished"
                :finished-text="(finished&&total>0) ? $t('no_more') : ''"
                loading-text="loading"
                @load="getTeacherCourse"
                >
                    <div style="margin-top:56px;">
                        <div class="white-bg" style="padding-bottom: 12px;">
                            <ul class="module-list-07">
                                <li class="clearfix">
                                    <span class="user-box">
                                        <img :src="instructorInfo.imag ? appUrl + instructorInfo.imag : '/resource/user/user.png'" alt=""/>
                                    </span>
                                    <div class="word-title-02">{{ instructorInfo.name }}<span class="recommend-box" v-show="instructorInfo.recommend === 1">{{ $t("instructor_recommend") }}</span></div><!--推荐-->
                                    <p class="color666 word-clamp-2 margin-top5"> {{starLevelType[instructorInfo.itiLevel]}} </p><!--星级讲师-->
                                    <p class="color666 margin-top5">{{ $t("instructor_expertise_areas") }}：{{ instructorInfo.beGoodAtField }}</p><!--主讲课程-->
                                </li>
                            </ul>
                            <ul class="module-list-08" v-if="moreList">
                                <li class="clearfix">
                                    <span>{{ $t("personal_files_sex") }}</span><!--性别-->
                                    <p>{{ instructorInfo.gender ? gender[instructorInfo.gender] : $t('mod_files_null') }}</p><!--未指定-->
                                </li>
                            </ul>
                            <ul class="module-list-08">
                                <li class="clearfix">
                                    <span></span>
                                    <p class="word-btn-01" @click="moreMessage()">{{ moreList == false ? $t('instructor_detail_show') : $t('instructor_detail_hide') }}</p><!--查看详情信息/隐藏详情信息-->
                                </li>
                            </ul>
                        </div>
                        <div class="module-box-14"><!--讲师信息-->
                            <p class="font-size14 color333" @click="moreModule" style="padding: 15px 0;">{{ $t('instructor_detail') }} <i class="more-icon" v-bind:class="{'cur' : isShow != false}"></i></p>
                            <ul class="box-list-01" v-bind:class="{'cur' : isShow == false}">
                                <li style="padding-top: 5px;">
                                    <p>{{ $t('mod_desc') }}</p><!--简介-->
                                    <p class="color999">{{ instructorInfo.descn }}</p>
                                </li>
                                <li>
                                    <p>{{ $t('instructor_course_category') }}</p><!--授课类别-->
                                    <p class="color999">{{ instructorInfo.cosType }}</p>
                                </li>
                                <li>
                                    <p>{{ $t('instructor_area_expertise') }}</p><!--擅长领域-->
                                    <p class="color999">{{ instructorInfo.beGoodAtField }}</p>
                                </li>
                                <li>
                                    <p>{{ $t('instructor_industry_expertise') }}</p><!--擅长行业-->
                                    <p class="color999">{{ instructorInfo.beGoodAtIndustry }}</p>
                                </li>
                            </ul>
                            <p style="padding-top: 15px;" v-if="isShow == false">......</p>
                        </div>
                        <div><!--开课列表-->
                            <p class="white-bg" style="padding: 30px 15px 0;">{{ $t('instructor_course_list') }}</p>
                            <div :class="courseInfo.courseMobileInd === 'yes'?'module-box-13':''" v-for="courseInfo in courseList" :key="courseInfo.courseId">
                                <!--是否发布到移动端-->
                                <div  v-if="courseInfo.courseMobileInd === 'yes'" @click="detailJump(courseInfo.courseId,courseInfo.courseType,courseInfo.courseName )">
                                    <div class="img-box learning-status-box">
                                        <img :src="appUrl + courseInfo.courseImg" alt="" style="width: 100%;"/>
    <!--                                    <div class="listContent-img-status" v-if="courseInfo.app">{{ typeTitle[courseInfo.app.app_status] }}</div>-->
                                    </div>
                                    <div class="content-box">
                                        <div class="word-clamp-2 font-size15"><span class="public-mobile-icon"></span>{{ courseInfo.courseName }}</div>
                                        <div>
                                            <span>{{courseInfo.courseExamInd === 1 ? examTypes[courseInfo.courseType] : courseType[courseInfo.courseType] }}</span><!--类型-->
                                            <span><em class="people-num-icon"></em>{{ courseInfo.courseLearns ? courseInfo.courseLearns : 0 }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="box-table white-bg" style="width:100%;height:300px;" v-show="total == 0">
                                <div class="box-table" style="width:100%;height:100%;">
                                    <div class="box-table-cell" style="text-align: center;">
                                        <div class="no-data">
                                            <img src="../../../static/images/no-data.png" alt=""/>
                                            <p class="color999">{{ $t('no_data') }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
import mixin from '@/components/mixin/Mixin';
export default {
    name: 'instructorDetail',
    mixins: [mixin],
    data() {
        return {
            instructorInfo: '', //讲师信息
            level: { //级别
                J: this.$t('instructor_level_junior'), //'初级'
                M: this.$t('instructor_level_middle'), //'中级'
                S: this.$t('instructor_level_senior'), //'高级'
                D: this.$t('instructor_level_special') //'特聘'
            },
            typeOf: { //类型
                P: this.$t('instructor_type_part_time'), //'兼职'
                F: this.$t('instructor_type_duty') //'专职'
            },
            source: { //来源
                IN: this.$t('instructor_source_internal'), //'内部讲师'
                EXT: this.$t('instructor_source_External') //'外部讲师'
            },
            gender: { //性别
                M: this.$t('personal_files_sex_M'), //男
                F: this.$t('personal_files_sex_F') //女
            },
            typeTitle: {
                I: this.$t('cos_app_inprogress'), //进行中
                C: this.$t('cos_app_completed'), //已完成
                notIAndC: this.$t('cos_other'), //其他
                F: this.$t('cos_app_fail'), //未完成
                W: this.$t('cos_app_withdrawn'), //已放弃
                Pending: this.$t('cos_app_pending'), //审批中
                Waiting: this.$t('cos_in_wait_list') //等待队列
            },
            examTypes: { //课程类型
                SELFSTUDY: this.$t('exam_type_selfstudy'), //网上课程
                CLASSROOM: this.$t('exam_type_classroom') //面授课程
            },
            moreList: false,
            isShow: false,
            pageNo: 1, //分页页码
            total: 0, //总数
            courseList: [], //开课列表
            isRefresh: false,
            finished: false,
            isLoading: false
        };
    },
    methods: {
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.courseList = [];
                this.pageNo = 1;
                // this.getCoursesList();
                this.getTeacherCourse('refresh');
                this.isRefresh = false;
            }, 900);
        },
        moreMessage() {
            this.moreList = !this.moreList;
        },
        moreModule() {
            this.isShow = !this.isShow;
        },
        detailJump(id, type, title) {
            if (type && type === 'AUDIOVIDEO') { //跳转到公开课
                this.$router.push({path: `/publicClass/openDetail/${id}`});
            } else if (type === 'MAP') {
                this.$router.push({path: '/studyMapDetail', query: {itmId: id, title: title}});
            } else if (type === 'CLASSROOM') {
                this.$router.push({path: `/certifiedCourse/${id}/0`});
            } else {
                this.$router.push({path: `/course/${id}/0`});
            }
        },
        /*@不虎新接口 获取讲师开课信息*/
        getTeacherCourse(option) {
            let paramsTemp = {
                pageNo: this.pageNo,
                pageSize: 10,
                isMobileInd: true
            };
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/my/class-opening/list/${this.$route.query.id}`,
                params: paramsTemp
            }).then(res => {
                if (option === 'refresh') {
                    this.courseList = res.data.results;
                } else {
                    this.courseList = [...this.courseList, ...res.data.results];
                }
                this.isLoading = false;
                this.total = res.data.totalRecord;
                this.pageNo++;
                if (this.courseList.length >= this.total) {
                    this.finished = true;
                }
            });
        },
        /*@不虎新接口 获取讲师详情*/
        getTeacherDetail() {
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/my/teacher-detail/${this.$route.query.id}`
            }).then(res => {
                if (res.status === 200) {
                    this.instructorInfo = res.data;
                }
            });
        }
    },
    mounted() {
        // this.getTeacherCourse();
        this.getTeacherDetail();
    }
};
</script>

<style scoped>
    .module-list-07 li {
        padding-bottom: 17px;
    }
    .module-list-08 li {
        padding: 0 15px 15px 90px;
        font-size: 12px;
    }
    .module-list-08 li span {
        float: left;
        margin-left: -75px;
        width: 70px;
    }
    .module-box-14 {
        background: #fafafa;
        padding: 15px 15px 30px;
    }
    .box-list-01.cur {
        height: 150px;
        overflow: hidden;
    }
    .box-list-01 li {
        /* padding: 17px 0 0; */
        height: 50px;
    }
    .box-list-01 li p:nth-of-type(1) {
        /* margin-bottom: 5px; */
    }
    .box-list-01 li p:nth-of-type(2) {
        line-height: 16px;
    }
    .module-box-13 {
        border-bottom: none;
        padding-left: 15px;
    }
</style>
